<template>
	<view class="container">
		<view class="header">
			<text class="title">学习资源</text>
			<view class="search-bar">
				<uni-icons type="search" size="20" color="#95a5a6"></uni-icons>
				<input type="text" v-model="searchKeyword" placeholder="搜索资源" class="search-input" />
			</view>
		</view>
		
		<!-- 资源分类 -->
		<scroll-view scroll-x class="category-scroll" :show-scrollbar="true">
			<view class="category-list">
				<view 
					v-for="(category, index) in categories" 
					:key="index"
					class="category-item"
					:class="{ active: currentCategory === category.id }"
					@click="selectCategory(category.id)"
				>
					{{ category.name }}
				</view>
			</view>
		</scroll-view>
		
		<!-- 资源列表 -->
		<view class="resource-list">
			<view class="resource-item" v-for="(resource, index) in resourceList" :key="index" @click="viewResource(resource)">
				<view class="resource-icon" :class="resource.type">
					<uni-icons :type="getIconType(resource.type)" size="24" color="#fff"></uni-icons>
				</view>
				<view class="resource-info">
					<text class="resource-name">{{ resource.name }}</text>
					<view class="resource-meta">
						<text class="resource-type">{{ resource.typeText }}</text>
						<text class="resource-size">{{ resource.size }}</text>
					</view>
					<view class="resource-footer">
						<text class="upload-time">{{ resource.uploadTime }}</text>
						<text class="download-count">下载：{{ resource.downloads }}</text>
					</view>
				</view>
				<view class="download-btn" @click.stop="downloadResource(resource)">
					<uni-icons type="download" size="20" color="#4b7bec"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				currentCategory: 1,
				categories: [
					{ id: 1, name: '全部' },
					{ id: 2, name: '教材' },
					{ id: 3, name: '讲义' },
					{ id: 4, name: '试题' },
					{ id: 5, name: '论文' },
					{ id: 6, name: '视频' }
				],
				resourceList: [
					{
						id: 1,
						name: '人体解剖学教材（第8版）',
						type: 'pdf',
						typeText: 'PDF文档',
						size: '156MB',
						uploadTime: '2024-03-19',
						downloads: 256
					},
					{
						id: 2,
						name: '神经系统解剖视频教程',
						type: 'video',
						typeText: '视频',
						size: '1.2GB',
						uploadTime: '2024-03-18',
						downloads: 128
					},
					{
						id: 3,
						name: '2023年病理学期末试题',
						type: 'doc',
						typeText: 'Word文档',
						size: '2.5MB',
						uploadTime: '2024-03-17',
						downloads: 512
					},
					{
						id: 4,
						name: '临床诊断学PPT',
						type: 'ppt',
						typeText: 'PPT',
						size: '45MB',
						uploadTime: '2024-03-16',
						downloads: 189
					}
				]
			}
		},
		methods: {
			selectCategory(categoryId) {
				this.currentCategory = categoryId;
				// TODO: 根据分类获取资源列表
			},
			getIconType(type) {
				const iconMap = {
					pdf: 'file-pdf',
					doc: 'file-text',
					ppt: 'file-powerpoint',
					video: 'videocam'
				};
				return iconMap[type] || 'file';
			},
			viewResource(resource) {
				return
				uni.navigateTo({
					url: `/pages/resource/detail?id=${resource.id}`
				});
			},
			downloadResource(resource) {
				// TODO: 实现资源下载功能
				uni.showToast({
					title: '开始下载',
					icon: 'success'
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}
	
	.header {
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
			margin-bottom: 20rpx;
		}
		
		.search-bar {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 10rpx 20rpx;
			border-radius: 100rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.search-input {
				flex: 1;
				margin-left: 10rpx;
				font-size: 28rpx;
				color: #2c3e50;
			}
		}
	}
	
	.category-scroll {
		margin-bottom: 30rpx;
		
		.category-list {
			display: flex;
			padding: 0 10rpx;
			
			.category-item {
				padding: 10rpx 30rpx;
				margin-right: 20rpx;
				background: #fff;
				border-radius: 100rpx;
				font-size: 28rpx;
				color: #7f8c8d;
				white-space: nowrap;
				
				&.active {
					background: #4b7bec;
					color: #fff;
				}
			}
		}
	}
	
	.resource-list {
		.resource-item {
			display: flex;
			align-items: center;
			background: #fff;
			padding: 20rpx;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.resource-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				
				&.pdf {
					background: #e74c3c;
				}
				
				&.doc {
					background: #3498db;
				}
				
				&.ppt {
					background: #e67e22;
				}
				
				&.video {
					background: #2ecc71;
				}
			}
			
			.resource-info {
				flex: 1;
				
				.resource-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #2c3e50;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.resource-meta {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;
					
					.resource-type {
						font-size: 24rpx;
						color: #7f8c8d;
						margin-right: 16rpx;
					}
					
					.resource-size {
						font-size: 24rpx;
						color: #95a5a6;
					}
				}
				
				.resource-footer {
					display: flex;
					align-items: center;
					
					.upload-time {
						font-size: 24rpx;
						color: #95a5a6;
						margin-right: 16rpx;
					}
					
					.download-count {
						font-size: 24rpx;
						color: #95a5a6;
					}
				}
			}
			
			.download-btn {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: rgba(75, 123, 236, 0.1);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style> 